<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="服务列表" name="third">
				<div style="display: inline-block;">
					<span>服务类型：</span>
					<el-select v-model="classifyIds" style="width:150px;margin-left: 10px;"
						@change="animeDat2(classifyIds)">
						<el-option v-for="item in homeData1" :key="item.modularId" :label="item.modularName"
							:value="item.modularId">
						</el-option>
					</el-select>&nbsp;&nbsp;&nbsp;
					<span>状态：</span>
					<el-select v-model="statusId" style="width:150px;margin-left: 10px;" @change="animeDat3(statusId)">
						<el-option v-for="item in statuss" :key="item.value" :label="item.title" :value="item.id">
						</el-option>
					</el-select>&nbsp;&nbsp;&nbsp;

					<div style="position: relative;display: inline-block;">
						<span>服务名称：</span>
						<el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入服务名称"
							v-model="search">
						</el-input>&nbsp;&nbsp;
					</div>
					<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="phoneSelect">查询
					</el-button>
					<el-button style="margin:10px;" size="mini" type="primary" icon="document" @click="cleans2">重置
					</el-button>&nbsp;&nbsp;
					<el-button style="margin: 10px 0;" :disabled="!isAuth('locality:add')" size="mini" type="primary"
						icon="document" @click="choiaddNotice()">添加服务</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div style="float: right;margin-right:2%;">
				</div>
				<el-table v-loading="tableDataLoading" :data="choicenData.records" height="600px">

					<el-table-column prop="serviceId" label="编号" width="80" fixed="left">
					</el-table-column>
					<el-table-column prop="modularName" label="服务类型">
					</el-table-column>
					<el-table-column prop="serviceType" label="模板类型">
						<template slot-scope="scope">
							<span v-if="scope.row.serviceType == 1 ">尊享VIP陪诊</span>
							<span v-if="scope.row.serviceType == 2 ">全程陪诊</span>
							<span v-if="scope.row.serviceType == 3 ">诊前约号</span>
							<span v-if="scope.row.serviceType == 4 ">代办问诊</span>
							<span v-if="scope.row.serviceType == 5 ">送取结果</span>
							<span v-if="scope.row.serviceType == 6 ">专享陪诊</span>
							<span v-if="scope.row.serviceType == 7 ">代办买药</span>
							<span v-if="scope.row.serviceType == 8">院内陪护</span>

						</template>
					</el-table-column>
					<el-table-column prop="img" label="图标" width="150">
						<template slot-scope="scope">
							<div v-if="scope.row.img">
								<div v-for="(item,index) in scope.row.img.split(',')" :key="index"
									style="display: inline-block; margin: 3px;">
									<el-popover placement="top-start" title="" trigger="hover">
										<img style="width: 50px; height: 50px" :src="item" alt="" slot="reference">
										<img style="width: 300px; height: auto" :src="item" alt="">
									</el-popover>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="serviceName" label="服务名称">
						<template slot-scope="scope">
							<div v-if="scope.row.serviceName">
								<el-popover placement="top-start" title="" trigger="hover">
									<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
										slot="reference">{{scope.row.serviceName}}</div>
									<div style="width: 400px;height: auto;">{{scope.row.serviceName}}</div>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="标题" width="250">
						<template slot-scope="scope">
							<div v-if="scope.row.title">
								<el-popover placement="top-start" title="" trigger="hover">
									<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
										slot="reference">{{scope.row.title}}</div>
									<div style="width: 400px;height: auto;">{{scope.row.title}}</div>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="money" label="服务价格">
					</el-table-column>
					<el-table-column prop="company" label="单位">
						<template slot-scope="scope">
							<span v-if="scope.row.company == 1 ">天</span>
							<span v-if="scope.row.company == 2 ">次</span>
						</template>
					</el-table-column>

					<el-table-column prop="sort" label="排序" width="80">
					</el-table-column>
					<el-table-column prop="tags" label="标签" width="200">
					</el-table-column>
					<el-table-column prop="serviceDescribe" label="描述" width="200">
						<template slot-scope="scope">
							<div v-if="scope.row.serviceDescribe">
								<el-popover placement="top-start" title="" trigger="hover">
									<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
										slot="reference">{{scope.row.serviceDescribe}}</div>
									<div style="width: 400px;height: auto;">{{scope.row.serviceDescribe}}</div>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="serviceContent" label="服务须知" width="200">
						<template slot-scope="scope">
							<div v-if="scope.row.serviceContent">
								<el-popover placement="top-start" title="" trigger="hover">
									<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
										slot="reference">{{scope.row.serviceContent}}</div>
									<div style="width: 400px;height: auto;">{{scope.row.serviceContent}}</div>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="serviceInstruction" label="服务内容" width="200">
						<template slot-scope="scope">
							<div v-if="scope.row.serviceInstruction">
								<el-popover placement="top-start" title="" trigger="hover">
									<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
										slot="reference">{{scope.row.serviceInstruction}}</div>
									<div style="width: 400px;height: auto;word-wrap: break-word;white-space: pre-wrap;">
										{{scope.row.serviceInstruction}}</div>
								</el-popover>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态" fixed='right'>
						<template slot-scope="scope">
							<!-- <span style="color: #4f9dec;" v-if="scope.row.status === 1 ">待审核</span> -->
							<el-switch v-model="scope.row.isEnable" :disabled="!isAuth('locality:update')"
								@change="change3(scope.row.isEnable,scope.row)" :active-value="openValue"
								:inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
							<!-- <span style="color: #4f9dec;" v-if="scope.row.status === 3 ">驳回</span> -->
						</template>
					</el-table-column>
					<el-table-column label="操作" prop="id" width="160" fixed='right' align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('locality:update')"
								@click="choiCompile(scope.$index, scope.row)">修改
							</el-button>
							<el-button size="mini" type="danger" :disabled="!isAuth('locality:delete')"
								@click="choidelete(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;float:right">
					<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
						:page-sizes="[10, 20, 30, 40]" :page-size="size" :current-page="page"
						layout="total,sizes, prev, pager, next,jumper" :total="choicenData.total">
					</el-pagination>
				</div>
				<!-- 添加信息弹框 -->
				<el-dialog :title="renwuTitles" customClass="customWidth" :visible.sync="dialogFormVisible5" center>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">服务分类：</span>
						<el-select v-model="modularId" style="width:45%;" @change="typeChange" placeholder="请选择服务分类">
							<el-option v-for="(item,index) in homeData" :key="index" :label="item.modularName"
								:value="item.modularId">
							</el-option>
						</el-select>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">模板类型：</span>
						<el-select v-model="serviceType" style="width:45%;" placeholder="请选择模板类型">
							<el-option v-for="(item,index) in mbTypes" :key="index" :label="item.serviceTypeName"
								:value="item.serviceType">
							</el-option>
						</el-select>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">服务名称：</span>
						<el-input v-model="serviceName" style="width:45%;" placeholder="请输入服务名称">
						</el-input>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">服务标题：</span>
						<el-input v-model="title" style="width:45%;" placeholder="请输入服务标题">
						</el-input>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">服务价格：</span>
						<el-input v-model="money" type="number" style="width:45%;" min="0" placeholder="请输入服务价格">
						</el-input>
					</div>
					<div style="margin-bottom: 10px;display: flex">
						<span style="width: 200px;display: inline-block;text-align: right;">描述：</span>
						<el-input v-model="serviceDescribe" type="textarea" :rows="4" style="width:45%;" min="0"
							placeholder="请输入描述">
						</el-input>

					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">单位：</span>
						<el-radio-group v-model="company">
							<el-radio :label="1">天</el-radio>
							<el-radio :label="2">次</el-radio>
						</el-radio-group>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
						<el-input v-model="sort" type="number" style="width:45%;" min="0" placeholder="请输入排序">
						</el-input>
					</div>

					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
						<el-radio-group v-model="isEnable">
							<el-radio :label="1">上架</el-radio>
							<el-radio :label="0">下架</el-radio>
						</el-radio-group>
					</div>
					<div style="margin-bottom: 10px;display:flex;">
						<span style="width: 200px;display: inline-block;text-align: right;">图标：</span>
						<div class="imgs" v-for="(item,index) in img" :key="index">
							<img width="100%" class="images" height="100%" :src="item" alt="">
							<span class="dels">
								<i class="el-icon-delete" @click="clear(index)"></i>
							</span>
						</div>

						<div class="imgs" style="width: 50%;" v-if="img.length<1">
							<el-upload :limit="1" :action="$http.adornUrl('alioss/upload')" list-type="picture-card"
								:show-file-list="false" :on-success="handleUploadSuccess" :on-progress="onprogress1">
								<el-progress v-if="percentage1>0 && percentage1<100" type="circle"
									:percentage="percentage1"></el-progress>
								<i v-else class="el-icon-plus"></i>
							</el-upload>
						</div>
					</div>
					<div style="margin-bottom: 10px;display:flex;">
						<span style="width: 200px;display: inline-block;text-align: right;">背景图片：</span>
						<div class="imgs" v-for="(item,index) in img2" :key="index">
							<img width="100%" class="images" height="100%" :src="item" alt="">
							<span class="dels">
								<i class="el-icon-delete" @click="clear2(index)"></i>
							</span>
						</div>

						<div class="imgs" style="width: 50%;" v-if="img2.length<1">
							<el-upload :limit="1" :action="$http.adornUrl('alioss/upload')" list-type="picture-card"
								:show-file-list="false" :on-success="handleUploadSuccess2" :on-progress="onprogress3">
								<el-progress v-if="percentage3>0 && percentage3<100" type="circle"
									:percentage="percentage3"></el-progress>
								<i v-else class="el-icon-plus"></i>
							</el-upload>
						</div>
					</div>
					<div style="margin-bottom: 10px;display:flex;">
						<span style="width: 200px;display: inline-block;text-align: right;">标识图标：</span>
						<div class="imgs" v-for="(item,index) in img3" :key="index">
							<img width="100%" class="images" height="100%" :src="item" alt="">
							<span class="dels">
								<i class="el-icon-delete" @click="clear3(index)"></i>
							</span>
						</div>

						<div class="imgs" style="width: 50%;" v-if="img3.length<1">
							<el-upload :limit="1" :action="$http.adornUrl('alioss/upload')" list-type="picture-card"
								:show-file-list="false" :on-success="handleUploadSuccess3" :on-progress="onprogress4">
								<el-progress v-if="percentage4>0 && percentage4<100" type="circle"
									:percentage="percentage4"></el-progress>
								<i v-else class="el-icon-plus"></i>
							</el-upload>
						</div>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">标签：</span>
						<span class="bqList" v-for="(item,index) in tags" :key="index">{{item}}
							<span class="delss">
								<i class="el-icon-delete" @click="dels1(index)"></i>
							</span>
						</span>
						<el-input v-model="bq" style="width:200px;" placeholder="请输入标签"
							onkeyup="this.value=this.value.replace(/[, ]/g,'')"
							@keydown.enter.native="btnTj"></el-input>
						<!-- <button class="tj" @click="btnTj">添加标签</button> -->
						<el-button type="primary" class="tj" size="mini" icon="el-icon-edit" circle @click="btnTj">
						</el-button>
					</div>
					<div style="display: flex;margin-bottom: 20px;">
						<span style="width: 200px;display: inline-block;text-align: right;">注意事项：</span>
						<el-input v-model="mattersThing" type="textarea" :rows="4" style="width:45%;" min="0"
							placeholder="请输入注意事项">
						</el-input>

					</div>
					<div style="margin-bottom: 10px;">
						<!-- onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" -->
						<span style="width: 200px;display: inline-block;text-align: right;">服务内容：</span>
						<!-- <el-input v-model="serviceInstruction" type="number" style="width:45%;" min="0" placeholder="请输入服务须知">
						</el-input> -->
						<quill-editor ref="myTextEditor" v-model="serviceInstruction" :options="quillOption"
							style="width: 45%;display: inline-table;margin-bottom: 100px;height: 200px;">
						</quill-editor>
					</div>
					<div style="margin-bottom: 10px;">
						<span style="width: 200px;display: inline-block;text-align: right;">服务须知：</span>
						<!-- <el-input v-model="serviceContent" style="width:45%;" placeholder="请输入服务内容">
						</el-input> -->
						<quill-editor ref="myTextEditor" v-model="serviceContent" :options="quillOption"
							style="width: 45%;display: inline-table;margin-bottom: 20px;height: 200px;">
						</quill-editor>
					</div>





					<div slot="footer" class="dialog-footer" style="margin-top: 30px;text-align: center;">
						<el-button @click="dialogFormVisible5 = false">取 消</el-button>
						<el-button type="primary" @click="addmissionNoticeTo()">确 定</el-button>
					</div>
				</el-dialog>
			</el-tab-pane>
			<!-- 服务分类 -->
			<el-tab-pane label="服务类型" name="first">
				<!--				<div style="width: 100%;text-align: right;">-->
				<!--					<el-button style="margin:10px;" size="mini" type="primary" icon="document"-->
				<!--						:disabled="!isAuth('locality:add')" @click="classAdd(0)">添加-->
				<!--					</el-button>-->
				<!--				</div>-->
				<el-table v-loading="tableDataLoading" :data="tableData.records">
					<el-table-column prop="modularId" label="编号" width="80">
					</el-table-column>
					<el-table-column prop="modularName" label="服务名称">
					</el-table-column>
					<el-table-column prop="image" label="服务图片">
						<template slot-scope="scope">
							<img v-if="scope.row.image &&scope.row.image!=''" :src="scope.row.image" width="40"
								height="40" />
							<span v-else>暂无图片</span>
						</template>
					</el-table-column>
					<el-table-column prop="tags" label="标签">
					</el-table-column>
					<el-table-column prop="isEnable" label="状态">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.isEnable"
								@change="change(scope.row.modularId,scope.row.isEnable)"
								:disabled="!isAuth('locality:update')" :active-value="openValue2"
								:inactive-value="closeValue2" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>

						</template>
					</el-table-column>
					<el-table-column label="操作" prop="id" width="240" fixed='right' align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!isAuth('locality:update')"
								@click="classAdd(scope.row)">修改
							</el-button>
							<!-- <el-button size="mini" type="danger" :disabled="!isAuth('locality:delete')"
								@click="classdelete(scope.row)">删除
							</el-button> -->
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
						layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
					</el-pagination>
				</div>
			</el-tab-pane>
			<!-- 服务审核弹框 -->
			<el-dialog title="服务审核" :visible.sync="dialogFormVisible8" center>
				<el-radio-group v-model="radio" style="width: 100%;margin-bottom: 30px;margin-left: 200px;">
					<el-radio :label="0">通过</el-radio>
					<el-radio :label="3">驳回</el-radio>
				</el-radio-group>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">审核理由：</span>
					<el-input style="width:50%;" v-model="contents" type="text" placeholder="请输入审核理由"></el-input>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible8 = false">取 消</el-button>
					<el-button type="primary" @click="refuseto()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 添加、修改服务分类 -->
			<el-dialog :title="titles" :visible.sync="dialogFormVisible9" center>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">服务名称：</span>
					<el-input style="width:50%;" v-model="modularName" type="text" disabled
						placeholder="请输入服务名称"></el-input>
				</div>
				<div style="margin-bottom: 10px;">
					<span style="width: 200px;display: inline-block;text-align: right;">标签：</span>
					<el-input v-model="bq" style="width:50%;" placeholder="请输入标签"></el-input>
					<!-- <span class="bqList" v-for="(item,index) in tags" :key="index">{{item}}
						<span class="delss">
							<i class="el-icon-delete" @click="dels1(index)"></i>
						</span>
					</span>
					<el-input v-model="bq" style="width:200px;" placeholder="请输入标签"
						onkeyup="this.value=this.value.replace(/[, ]/g,'')" @keydown.enter.native="btnTj"></el-input>
					<el-button type="primary" class="tj" size="mini" icon="el-icon-edit" circle @click="btnTj">
					</el-button> -->
				</div>
				<div style="margin-bottom: 10px;display:flex;">
					<span style="width: 200px;display: inline-block;text-align: right;">服务图片：</span>
					<div
						style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
						<el-upload class="avatar-uploader" v-model="image" :action="$http.adornUrl('alioss/upload')"
							:show-file-list="false" :on-success="handleAvatarSuccess1" :on-progress="onprogress2">
							<img v-if="image!=''&&percentage2==100" :src="image" class="avatar"
								style="border-radius: 6px;width: 148px;height: 148px;" />
							<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
							<el-progress v-if="percentage2>0&&percentage2<100" type="circle" :percentage="percentage2">
							</el-progress>
						</el-upload>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible9 = false">取 消</el-button>
					<el-button type="primary" @click="refuseto1()">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 评论列表 -->
			<el-dialog title="评论列表" :visible.sync="dialogFormVisible10" center>
				<el-table v-loading="tableDataLoading" :data="pinglunData.list">
					<el-table-column prop="id" label="编号" width="80">
					</el-table-column>
					<el-table-column prop="userName" label="评论用户" width="120">
						<template slot-scope="scope">
							<span style="color: #4f9dec;cursor: pointer;" @click="updatesvideo(scope.row)"
								v-text="scope.row.userName"></span>
						</template>
					</el-table-column>
					<el-table-column prop="avatar" label="用户头像" width="100">
						<template slot-scope="scope">
							<img v-if="scope.row.avatar && scope.row.avatar!=''" :src="scope.row.avatar" width="40"
								height="40" />
							<span v-else>暂无图片</span>
						</template>
					</el-table-column>
					<el-table-column prop="content" label="评论内容">
					</el-table-column>
					<el-table-column prop="createTime" label="评论时间" width="180">
					</el-table-column>
					<el-table-column label="操作" prop="id" width="100" fixed='right' align="center">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" :disabled="!isAuth('locality:delete')"
								@click="pinglundelete(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="text-align: center;margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3"
						:page-sizes="[10, 20, 30, 40]" :page-size="size2" :current-page="page2"
						layout="total,sizes, prev, pager, next,jumper" :total="pinglunData.totalCount">
					</el-pagination>
				</div>
			</el-dialog>
		</el-tabs>
	</div>
</template>

<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import quillConfig from './quill-config.js'
	import axios from 'axios';
	import {
		jsonp
	} from 'vue-jsonp'
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	var cityOptions = []
	var geocoder, map, markersArray = [];
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				size: 10,
				page: 1,
				size1: 10,
				page1: 1,
				size2: 10,
				page2: 1,
				limit: 10,
				openValue: 1,
				closeValue: 0,
				openValue1: 1,
				closeValue1: 0,
				openValue2: 1,
				closeValue2: 0,
				activeName: 'third',
				tableDataLoading: true,
				tableDataLoading4: false,
				dialogFormVisible5: false,
				dialogFormVisible8: false,
				dialogFormVisible9: false,
				dialogFormVisible10: false,
				homeData: [],
				homeData1: [{
					id: 0,
					name: '全部'
				}],
				mbTypes: [
					{
						serviceType: 1,
						serviceTypeName: '尊享VIP陪诊'
					}, {
						serviceType: 2,
						serviceTypeName: '全程陪诊'
					}, {
						serviceType: 3,
						serviceTypeName: '诊前约号'
					}, {
						serviceType: 4,
						serviceTypeName: '代办问诊'
					}, {
						serviceType: 5,
						serviceTypeName: '送取结果'
					}, {
						serviceType: 6,
						serviceTypeName: '专享陪诊'
					}, {
						serviceType: 7,
						serviceTypeName: '代办买药'
					}, {
						serviceType: 8,
						serviceTypeName: '院内陪护'
					},
				],
				choicenData: {},
				pinglunData: {},
				renwuId: '',
				id: '',
				userId: '',
				search: '',
				classifyIds: '',
				statusId: '',
				statuss: [{
					id: '',
					title: '全部'
				},
				{
					id: 1,
					title: '上架'
				},
				{
					id: 0,
					title: '下架'
				},
				],
				// 发布信息

				percentage: 0, //进度条
				percentage2: 0, //进度条
				modularId: '', //服务分类id
				serviceType: '',//模板类型id
				serviceId: '',//服务id
				serviceInstruction: '',
				money: '',
				serviceDescribe: '',
				company: '',
				sort: '',
				isEnable: 1, //状态1上架  0下架
				serviceName: '',
				title: '',
				serviceContent: '',
				options: regionData,
				storeAddress: [],
				storeAddre: '请选择城市',
				province: '', //省
				district: '', //区
				ids: '', //信息id
				img: [], //图片
				img2: [],//背景图片
				img3: [],//标识图片
				mattersThing: '',//注意事项
				tags: [],//标签
				bq: '', //输入的标签名
				missions: 0,
				shenheId: 0, //审核id
				contents: '', //驳回理由
				radio: 0,
				multipleSelection: [],


				homeData2: [],
				quillOption: quillConfig,

				tableData: {},
				titles: '添加服务类型',
				renwuTitles: '添加服务',
				modularName: '',
				gameIds: '',
				image: '',
				gameStatus: 1,



				percentage1: 0,
				percentage3: 0,
				percentage4: 0,

			}
		},
		methods: {
			typeChange(e) {
				console.log(e)
				if (e == 2) {
					this.company = 1
				} else {
					this.company = 2
				}
			},
			handleSizeChange(val) {
				this.limit = val
				this.classSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.classSelect()
			},
			handleSizeChange1(val) {
				this.limit = val
				this.InformationSelect()
			},
			handleCurrentChange1(val) {
				this.page = val
				this.InformationSelect()
			},
			handleSizeChange2(val) {
				this.size1 = val
				this.tableDataLoading4 = true
				this.userClass()
			},
			handleCurrentChange2(val) {
				this.page1 = val
				this.tableDataLoading4 = true
				this.userClass()
			},
			handleSizeChange3(val) {
				this.size2 = val
				this.pinglunSelect(this.renwuId)
			},
			handleCurrentChange3(val) {
				this.page2 = val
				this.pinglunSelect(this.renwuId)
			},
			handleClick(tab, event) {
				this.page = 1
				if (tab._props.label == '服务列表') {
					this.InformationSelect()
				}
				if (tab._props.label == '服务类型') {
					this.classSelect()
				}
			},

			//添加服务
			choiaddNotice() {
				this.renwuTitles = '添加服务'
				this.dialogFormVisible5 = true
				this.percentage = 0
				this.modularId = ''
				this.serviceId = ''
				this.serviceName = ''
				this.title = ''
				this.serviceContent = ''
				this.serviceInstruction = ''
				this.money = ''
				this.serviceDescribe = ''
				this.company = ''
				this.sort = ''
				this.isEnable = 1
				this.tags = []
				this.img = []
				this.img2 = []
				this.img3 = []
				this.mattersThing = ''
				this.serviceType = ''
			},
			// 修改信息弹框
			choiCompile(index, row) {
				console.log(index, row)
				this.tags = []
				this.missions = 1
				this.renwuTitles = '修改服务'
				if (row) {
					this.modularId = row.modularId
					this.serviceId = row.serviceId
					this.serviceName = row.serviceName
					this.title = row.title
					this.serviceContent = row.serviceContent
					this.serviceInstruction = row.serviceInstruction
					this.money = row.money
					this.serviceDescribe = row.serviceDescribe
					this.company = row.company

					if (row.sort) {
						this.sort = row.sort
					} else {
						this.sort = ''
					}
					this.mattersThing = row.mattersThing
					if (row.img) {
						this.img = row.img.split(",")
					} else {
						this.img = []
					}
					if (row.backgroundImg) {
						this.img2 = row.backgroundImg.split(",")
					} else {
						this.img2 = []
					}
					if (row.icon) {
						this.img3 = row.icon.split(",")
					} else {
						this.img3 = []
					}

					if (row.tags) {
						this.tags = row.tags.split(",")
					} else {
						this.tags = []
					}
					if (row.serviceType) {
						this.serviceType = row.serviceType
					} else {
						this.serviceType = ''
					}
					this.isEnable = Number(row.isEnable)
					this.percentage = 100
				}
				this.dialogFormVisible5 = true
			},
			// 查询
			phoneSelect() {
				this.page = 1
				this.InformationSelect()
			},
			// 重置
			cleans2() {
				this.isEnable = ''
				this.statusId = ''
				this.search = ''
				this.classifyIds = ''
				this.page = 1
				this.InformationSelect()
			},
			// 获取服务分类启用列表
			homeSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('admin/hospitalModular/getModularList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': 1,
						'limit': 100
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data.records
					this.homeData1 = [{
						modularId: '',
						modularName: '全部'
					}]
					if (data.data.records) {
						for (var i in data.data.records) {
							this.homeData1.push(data.data.records[i])
						}
					}
					this.homeData = data.data.records
				})
			},
			// 信息数据
			InformationSelect() {
				this.userId = this.$store.state.user.id
				this.$http({
					url: this.$http.adornUrl('admin/hospitalEmploy/getHospitalEmployList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'serviceName': this.search,
						'modularId': this.classifyIds,
						'isEnable': this.statusId,
						// 'city': regions
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.choicenData = returnData

				})
			},
			// 图片上传
			handleAvatarSuccess1(file) {
				this.image = file.data;
			},
			onprogress2(event, file, fileList) {
				this.percentage2 = parseInt(event.percent)
			},

			// 删除详情图
			dels(index) {
				this.img.splice(index, 1);
			},
			// 添加标签
			btnTj() {
				if (this.bq == '' || this.bq == ' ') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入标签名',
						type: 'warning'
					});
					return
				} else {
					console.log('this.bq', this.bq)
					this.tags.push(this.bq)
					this.bq = ''
				}
			},
			// 删除标签
			dels1(index) {
				this.tags.splice(index, 1);
			},
			// 确定添加
			addmissionNoticeTo() {
				let photost = this.img.toString();
				if (this.modularId == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选服务分类',
						type: 'warning'
					});
					return
				}
				if (this.serviceType == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择模板类型',
						type: 'warning'
					});
					return
				}
				if (this.serviceName == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入服务名称',
						type: 'warning'
					});
					return
				}
				if (this.title == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入服务标题',
						type: 'warning'
					});
					return
				}
				if (this.money == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入服务价格',
						type: 'warning'
					});
					return
				}
				if (this.img.length == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传图标',
						type: 'warning'
					});
					return
				}
				if (this.img2.length == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传背景图片',
						type: 'warning'
					});
					return
				}
				if (this.tags.length == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入标签',
						type: 'warning'
					});
					return
				}

				if (this.sort === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入排序',
						type: 'warning'
					});
					return
				}
				if (this.serviceInstruction == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入服务内容',
						type: 'warning'
					});
					return
				}

				if (this.serviceContent == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入服务须知',
						type: 'warning'
					});
					return
				}
				if (this.mattersThing == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入注意事项',
						type: 'warning'
					});
					return
				}
				let urls = ''
				if (this.renwuTitles == '添加服务') {
					urls = 'admin/hospitalEmploy/addHospitalEmploy'
				} else {
					urls = 'admin/hospitalEmploy/updateHospitalEmploy'
				}
				let that = this
				setTimeout(function () {
					that.$http({
						url: that.$http.adornUrl(urls),
						method: 'post',
						data: that.$http.adornData({
							// params: that.$http.adornParams({
							'modularId': that.modularId,
							'serviceInstruction': that.serviceInstruction,
							'money': that.money,
							'serviceDescribe': that.serviceDescribe,
							'serviceName': that.serviceName,
							'title': that.title,
							'serviceContent': that.serviceContent,
							'img': that.img.toString(),
							'backgroundImg': that.img2.toString(),
							'tags': that.tags.toString(),
							'company': that.company,
							'sort': that.sort,
							'serviceId': that.serviceId,
							'isEnable': that.isEnable,
							'serviceType': that.serviceType,//模板类型
							'mattersThing': that.mattersThing,
							'icon': that.img3.toString(),

						}, false, 'from')
					}).then(({
						data
					}) => {
						console.log('提交结果', data)
						if (data.code == 0) {
							that.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									that.dialogFormVisible5 = false
									that.InformationSelect()
								}
							})
						} else {
							that.$notify({
								title: '提示',
								duration: 1800,
								message: data.msg,
								type: 'warning'
							});
						}
					})
				}, 1000)
			},
			// 审核
			shenhe(row) {
				this.shenheId = row.id
				this.dialogFormVisible8 = true
			},
			// 提交审核
			refuseto(row) {
				if (this.radio == 2 && this.contents == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入驳回理由',
						type: 'warning'
					})
					return
				} else {
					let ids = this.shenheId
					let status = this.radio
					let content = this.contents
					this.$http({
						url: this.$http.adornUrl(`orderTaking/auditorOrderTaking`),
						method: 'get',
						params: this.$http.adornParams({
							'id': ids,
							'status': status,
							'content': content
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.dialogFormVisible8 = false
							this.$message({
								message: '审核完成',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.radio = 0
									this.contents = ''
									this.InformationSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'error',
								duration: 1500,
								onClose: () => {
								}
							})
						}

					})
				}
			},

			// 查看评论
			plCompile(row) {
				this.renwuId = row.id
				this.dialogFormVisible10 = true
				this.pinglunSelect(row.id)
			},
			// 删除信息
			choidelete(row) {
				let delid = row.serviceId
				this.$confirm(`确定删除此条服务?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('admin/hospitalEmploy/deleteHospitalEmploy'),
						method: 'get',
						params: this.$http.adornParams({
							'serviceId': delid
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.InformationSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
								}
							})
						}
					})
				}).catch(() => { })
			},
			// 筛选信息
			animeDat2(state) {
				this.InformationSelect()
			},
			// 筛选信息
			animeDat4(state) {
				this.InformationSelect()
			},
			animeDat3(state) {
				this.InformationSelect()
			},
			// 多选
			handleSelectionChange(val) {
				var arr = []
				for (var i in val) {
					arr.push(val[i].id)
				}
				this.multipleSelection = arr;
				console.log('val', val, this.multipleSelection)
			},
			// 批量删除
			choideletes() {
				console.log(this.multipleSelection)
				let delid = this.multipleSelection.toString()
				this.$confirm(`确定删除信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`information/deleteInformationById?ids=${delid}`),
						method: 'post',
						params: this.$http.adornData({})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.InformationSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'error',
								duration: 1500,
								onClose: () => {
								}
							})
						}

					})
				}).catch(() => { })
			},
			// 服务推荐
			change2(val, row) {
				this.$http({
					url: this.$http.adornUrl(`orderTaking/updateOrderTakingRecommend/${row.id}`),
					method: 'post',
					data: this.$http.adornData({})
				}).then(({
					data
				}) => {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.homeSelect()
						}
					})
				})
			},
			// 服务上下架
			change3(isEnable, row) {
				this.$http({
					url: this.$http.adornUrl('admin/hospitalEmploy/updateHospitalEmploy'),
					method: 'post',
					params: this.$http.adornParams({
						'serviceId': row.serviceId,
						'isEnable': isEnable,
						'modularId': row.modularId
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.InformationSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
								this.InformationSelect()
							}
						})
					}

				})
			},
			// 详情跳转
			updatesvideo(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			changeaa(e) {
				this.value1 = e
			},
			changeaa1(e) {
				this.value2 = e
			},
			// 获取服务分类数据
			classSelect() {
				this.$http({
					url: this.$http.adornUrl('admin/hospitalModular/getModularList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'modularName': ''
					})
				}).then(({
					data
				}) => {
					console.log('', data)
					if (data.code == 0) {
						this.tableDataLoading = false
						let returnData = data.data
						this.tableData = returnData
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						});
					}
				})
			},
			// 添加服务类型
			classAdd(row) {
				console.log('row', row)
				if (row != 0) {
					this.titles = '修改服务类型'
					this.modularName = row.modularName
					this.gameIds = row.modularId
					this.image = row.image
					this.gameStatus = row.isEnable
					this.tags = row.tags.split(',')
					this.bq = row.tags
					this.percentage2 = 100
				} else {
					this.titles = '添加服务类型'
					this.modularName = ''
					this.gameIds = ''
					this.image = ''
					this.bq = ''
					this.gameStatus = 1
					this.tags = []
				}
				this.dialogFormVisible9 = true
			},
			// 启用与否
			change(id, status) {
				this.$http({
					url: this.$http.adornUrl('admin/hospitalModular/updateModular'),
					method: 'post',
					params: this.$http.adornParams({
						'modularId': id,
						'isEnable': status
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.classSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
							onClose: () => {
							}
						})
					}

				})
			},
			// 提交修改、添加服务类型
			refuseto1() {
				// if (this.modularName == '') {
				// 	this.$notify({
				// 		title: '提示',
				// 		duration: 1800,
				// 		message: '请输入服务名称',
				// 		type: 'warning'
				// 	})
				// 	return
				// }

				if (this.image == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传服务图片',
						type: 'warning'
					})
					return
				}
				if (this.titles == '添加服务类型') {
					var urls = 'admin/hospitalModular/addModular'
				} else {
					var urls = 'admin/hospitalModular/updateModular'
				}
				this.$http({
					url: this.$http.adornUrl(urls),
					method: 'post',
					params: this.$http.adornParams({
						'modularName': this.modularName,
						'isEnable': this.gameStatus,
						'image': this.image,
						'modularId': this.gameIds,
						// 'tags': this.tags.toString()
						'tags': this.bq
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.dialogFormVisible9 = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.modularName = ''
								this.classSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => { }
						})
					}

				})
			},
			// 删除服务分类
			classdelete(row) {
				let delid = row.modularId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('admin/hospitalModular/deleteModular'),
						method: 'get',
						params: this.$http.adornParams({
							'modularId': delid
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.classSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => { }
							})
						}

					})
				}).catch(() => { })
			},
			// 用户评论列表
			pinglunSelect(id) {
				this.userId = this.$store.state.user.id
				this.$http({
					url: this.$http.adornUrl('takingComment/selectOrderTakingComment'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'id': id
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.pinglunData = returnData
				})
			},
			handleChange(file, fileList) {
				this.hideUpload = fileList.length >= this.limit;
			},
			handleRemove(file, fileList) {
				this.hideUpload = fileList.length >= this.limit;
			},
			// 删除
			clear(index) {
				this.img.splice(index, 1);
			},
			// 删除
			clear2(index) {
				this.img2.splice(index, 1);
			},
			// 删除
			clear3(index) {
				this.img3.splice(index, 1);
			},
			//上传成功
			handleUploadSuccess(file, fileList) {
				this.img.push(file.data)
			},
			handleUploadSuccess2(file, fileList) {
				this.img2.push(file.data)
			},
			handleUploadSuccess3(file, fileList) {
				this.img3.push(file.data)
			},
			onprogress1(event, file, fileList) {
				this.percentage1 = parseInt(event.percent)
			},
			onprogress3(event, file, fileList) {
				this.percentage3 = parseInt(event.percent)
			},
			onprogress4(event, file, fileList) {
				this.percentage4 = parseInt(event.percent)
			},
		},
		mounted() {
			this.InformationSelect()
			this.homeSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}

	.imgs {
		position: relative;
		border-radius: 6px;
		width: 148px;
		height: 148px;
		margin-right: 10px;
		display: inline-block;
	}

	.dels {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}

	.dels .el-icon-delete {
		line-height: 148px;
		padding-left: 58px;
		font-size: 25px;
		color: #fff;
	}

	.imgs:hover .dels {
		width: 100%;
		height: 100%;
		background: #000;
		display: block;
		opacity: 0.5;
	}

	.bqList {
		padding: 4px 14px;
		margin: 4px;
		border: 1px solid #efefef;
		font-size: 12px;
		color: #999;
		border-radius: 4px;
		margin-right: 15px;
	}

	.delss {
		display: none;
		position: relative;
	}

	.delss .el-icon-delete {
		position: absolute;
		top: 0;
	}

	.bqList:hover .delss {
		display: initial;
		opacity: 0.5;

	}

	.tj {
		padding: 6px !important;
		margin: 4px;
		font-size: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
</style>